import AutoChart from '@/components/Echarts/AutoChart';
import { topMedicines } from '@/services/api';
// @ts-ignore
import { BorderBox4 } from '@jiaminghi/data-view-react';
import React, { useEffect } from 'react';
import { useImmer } from 'use-immer';
import '../../Home.less';

const ColumnCharts: React.FC = () => {
  const [options, setOptions] = useImmer({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      top: '1%',
      left: '7%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    yAxis: [
      {
        type: 'category',
        data: [],
        axisLine: {
          show: false,
        },
        axisTick: {
          // 刻度线
          show: false,
          alignWithLabel: false,
        },
        offset: 10,
        axisLabel: {
          // 轴的标签
          // rotate: 45,
          overflow: 'truncate',
          ellipsis: '...',
          width: 60,
          color: '#fff',
        },
      },
    ],
    xAxis: [
      {
        type: 'value', // 以数字的刻度进行显示多长的条状
        axisTick: {
          //是否显示坐标轴刻度。
          alignWithLabel: false,
        },
        offset: 0,
        dataMin: 0, // 最小刻度值
        boundaryGap: false, // y轴是否有留白
        axisLine: {
          // 是否显示坐标轴轴线。
          show: false,
        },
        axisLabel: {
          // 标签文字显示还是隐藏
          show: false,
        },
        splitLine: {
          // 网格内的分割线
          show: false, // 通过设置该属性为false来隐藏分割线
          lineStyle: {
            color: '#fff',
          },
        },
      },
    ],
    series: [
      {
        name: '数量:',
        type: 'bar',
        barWidth: 10,
        //   data: workCountState.length > 0 ? workCountState : ['0'],
        data: [],
        itemStyle: {
          color: {
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: '#66e4fe', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#396993', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  });

  useEffect(() => {
    topMedicines().then((res) => {
      setOptions((draft) => {
        draft.yAxis[0].data = res.data.map((i: API.ChartsData) => i.name);
        draft.series[0].data = res.data.map((i: API.ChartsData) => Number(i.value));
      });
    });
  }, []);

  return (
    <div className="chart_box">
      <BorderBox4 color={['#396993', '#396993']}>
        <div className="chart_title">中药产量排行</div>
        <div className="chart_chart padding-5">
          <AutoChart option={options as any}></AutoChart>
        </div>
      </BorderBox4>
    </div>
  );
};
export default ColumnCharts;
